
.bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
  width: 160px;
  @include transition;
  &.active {
    width: 320px;
  }
}
.bar-pane {
  width: 160px;
  background: #354052;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.bar-logo {
  background: #ff782d;
  width: 160px;
  height: 40px;
  img {
    width: 106px;
    height: 22px;
    margin: 9px auto;
  }
}
.bar-li {
  img {
    width: 16px;
    height: 14px;
    float: left;
    margin: 0px 7px 0 0;
  }
  a {
    display: block;
    padding: 12px 5px 12px 13px;
    color: #a0acbf;
    font-size: 12px;
    font-weight: 800;
    background: #354052;
    position: relative;
    .arrow {
      border-color: #fff transparent;
      border-width: 5px 4px 0;
      @include transition;
    }
    &:hover {
      background: #293240;
      color: #FF782D;
    }
  }
  &.active {
    a {
      // background: #293240;
      // color: #FF782D;
      .arrow {
        // border-width: 0 4px 5px;
        @include rotate(-180deg);
      }
    }
  }
}
.hover-hide {
  display: block;
  a:hover > & {
    display: none;
  }
}
.hover-show {
  display: none;
  a:hover > & {
    display: block;
  }
}
.bar-subnav {
  display: none;
  overflow: hidden;
  .bar-sub-li {
    a {
      padding-left: 13px + 16px + 7px - 4px;
      border-left: 4px solid #354052;
      background: #354052;
      font-weight: 200;
      &:hover {
        background: #293240;
        color: #FF782D;
      }
      .arrow {
        border-color: transparent #fff;
        border-width: 4px 0 4px 5px;
        @include rotate;
        @include transition($duration: 0s);
      }
    }
    &.active {
      a {
        background: #293240;
        color: #FF782D;
        border-color: #ff782d;
      }
    }
  }
}
.nav-icons {
  width: 16px;
  height: 16px;
  float: left;
  margin: 1px 7px 0 0;
}
.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  right: 12px;
  top: 17px;
}
.bar-aside {
  width: 160px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 40px;
  background: #293240;
  @include transition;
  z-index: 1;
  .bar.active & {
    left: 160px;
  }
  h2 {
    font: 14px/1 "Microsoft Yahei";
    color: #FF782D;
    padding: 12px 8px;
  }
  li {
    a {
      font-size: 14px;
      display: block;
      padding: 12px 8px;
      color: #a0acbf;
      &:hover {
        background: #212833;
        color: #FF782D;
      }
    }
    b {
      font-size: 12px;
      margin-right: 5px;
    }
  }
}
.bar-close {
  border: 1px solid #908c8c;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  margin-top: -2px;
  color: #908c8c;
  &:hover {
    border-color: #FF782D;
    color: #FF782D;
  }
}

a:hover {
  .icons-i1 {
    @extend .i1-hover;
  }
  .icons-i2 {
    @extend .i2-hover;
  }
  .icons-i3 {
    @extend .i3-hover;
  }
  .icons-i4 {
    @extend .i4-hover;
  }
  .icons-i5 {
    @extend .i5-hover;
  }
  .icons-i6 {
    @extend .i6-hover;
  }
  .icons-i7 {
    @extend .i7-hover;
  }
  .icons-i8 {
    @extend .i8-hover;
  }
  .icons-i9 {
    @extend .i9-hover;
  }
  .icons-i10 {
    @extend .i10-hover;
  }
}
